<template>
  <div class="container">
    <div class="w1300">
      <breadcrumb currentPath="/mall/goods/order" title="我的订单"></breadcrumb>

      <div class="order-box">
        <div class="order-status-wrap flex-xbt">
          <div class="status flex-yc">
            <span class="active">所有订单</span>
            <span>待付款</span>
            <span>待发货</span>
            <span>待收货</span>
            <span>待评价</span>
          </div>
          <div class="search-wrap flex-yc">
            <el-dropdown>
              <span class="el-dropdown-link flex-yc" style="width: 88px">
                订单类型
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>所有订单</el-dropdown-item>
                  <el-dropdown-item>待付款</el-dropdown-item>
                  <el-dropdown-item>待发货</el-dropdown-item>
                  <el-dropdown-item>待收货</el-dropdown-item>
                  <el-dropdown-item>待评价</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-input
              v-model="orderData.keyword"
              placeholder="搜索订单号，商品名称"
              :suffix-icon="Search"
            />
          </div>
        </div>

        <div class="table">
          <div class="order-theader flex">
            <span class="td1">商品</span>
            <span class="td2">单价/元</span>
            <span class="td3">数量</span>
            <span class="td4">小计/元</span>
          </div>
          <div class="both-handler-wrap flex-yc">
            <el-checkbox class="both" size="small">全选</el-checkbox>
            <el-button plain size="small">合并付款</el-button>
            <el-button size="small">批量确认收货</el-button>
          </div>

          <div class="table-wrap">
            <div class="order-item-wrap" v-for="item in 2" :key="item">
              <div class="order-wrap-info flex-yc flex-xbt">
                <div class="order-date-no flex-yc">
                  <el-checkbox size="small"></el-checkbox>
                  <span class="el-icon--right">2020.03.03 12:00:00</span>
                  <span class="order-no flex-yc">
                    订单编号：12321321221213141
                    <el-icon class="el-icon--right"><copy-document /></el-icon>
                  </span>
                  <span>¥ 12211.00</span>
                </div>
                <span class="status">待付款</span>
              </div>

              <div class="order-con flex">
                <div class="order-item-wrap">
                  <order-table></order-table>
                </div>
                <div class="order-item-status flex-y flex-xyc">
                  <span
                    class="active"
                    @click="router.push('/mall/goods/order-confirm')"
                  >
                    立即付款
                  </span>
                  <span @click="router.push('/mall/goods/order-detail')">
                    订单详情
                  </span>
                  <span>取消订单</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="pagination flex-xyc">
          <el-pagination background layout="prev, pager, next" :total="50" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
import OrderTable from '@/pages/mall/components/OrderTableCom.vue'
import { Search } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const orderData = reactive({
  keyword: '',
})
</script>

<style scoped lang="scss">
.container {
  overflow: hidden;
  background-color: #f7f8fa;

  .order-box {
    margin-bottom: 50px;
    background-color: #fff;

    .order-status-wrap {
      padding: 0 32px;
      border-bottom: 1px solid $borderCol;

      .status {
        span {
          padding: 20px 0;
          font-size: 16px;
          color: #040724;
          cursor: pointer;
          border-bottom: 2px solid transparent;

          &.active {
            border-bottom: 2px solid $primary;
          }

          & + span {
            margin-left: 49px;
          }
        }
      }
    }

    .table {
      padding: 0 32px;
    }

    .order-theader {
      margin: 32px 0 20px;
      background-color: #f7f7f7;

      span {
        width: 180px;
        padding: 10px 16px;
        text-align: center;

        &:nth-child(1) {
          text-align: left;
        }

        &.td1 {
          width: 516px;
        }
      }
    }

    .both-handler-wrap {
      font-size: 14px;

      .both {
        margin-right: 10px;
      }
    }

    .table-wrap {
      .order-item-wrap {
        .order-wrap-info {
          padding: 10px 16px;
          margin-top: 14px;
          font-size: 14px;
          color: #040724;
          background-color: #f7f7f7;

          .order-date-no {
            .order-no {
              margin: 0 25px 0 16px;

              .el-icon--right {
                color: $primary;
              }
            }
          }

          .status {
            color: $primary;
          }
        }

        .order-con {
          border: 1px solid $borderCol;

          .order-item-wrap {
          }

          .order-item-status {
            flex: 1;
            font-size: 16px;
            color: #021429;

            span {
              cursor: pointer;

              &.active,
              &:hover {
                color: $primary;
              }

              & + span {
                margin-top: 16px;
              }
            }
          }
        }
      }
    }

    .pagination {
      padding: 50px 32px 36px;
    }
  }
}
</style>
